<template>
  <ul class="text">
    <li v-for="(item, index) in textList" :key="index" draggable="true" :class="{ 'outline': drargIndex === index }"
      @dragstart="dragstart(index)" @dragend="dragText($event, item)"
      :style="{ marginLeft: index % 2 != 0 ? '10px' : '18px' }">
      <svg class="icon svg-icon" aria-hidden="true">
        <use :xlink:href="`#${item.icon}`"></use>
      </svg>
      <p>{{ item.name }}</p>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { TEXT_LIST } from '@/configs/text'
export default defineComponent({
  name: 'text-pool',
  emits: ['select'],
  setup(props, { emit }) {
    const textList = TEXT_LIST
    const drargIndex = ref()
    const dragstart = (index: number) => {
      // console.log(index, 'sstart')
      drargIndex.value = index
    }
    const dragText = ($event: MouseEvent, text: string) => {
      emit('select', { text, $event })
      drargIndex.value = undefined
    }
    return {
      textList,
      dragText,
      dragstart,
      drargIndex
    }
  },
})
</script>

<style lang="scss" scoped>
ul.text {
  overflow: hidden;

  li {
    float: left;
    width: 50%;
    height: 100px;
    background: transparent;
    // padding: 18px 13px 0.5px;
    border-radius: 8px;
    margin-bottom: 10px;
    margin-left: 0 !important;
    text-align: center;
    color: $defaultIconColor;

    p {
      font-size: 14px;
      text-align: center;
      padding: 12px 0 10px 0;
    }

    &:hover {
      cursor: move;
      color: white;
    }

    .icon {
      width: 100px;
      height: 60px;
    }
  }
}
</style>